<template>
  <div class="main">
    <div v-if="notice" class="layout-notice">
      <Alert type="info" closable>
        <Icon type="ios-volume-up" />
        <div class="notice">
          <marquee>
            <span>{{ notice }}</span>
          </marquee>
        </div>
      </Alert>
    </div>

    <div class="layout-content">
      <div class="page-header">
        <HeaderTab :user="user" />
      </div>
      <div>
        <navigation></navigation>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import HeaderTab from '@/views/home/header'
import Navigation from '@/views/home/navigation'
export default {
  name: 'DashHome',
  components: {
    HeaderTab,
    Navigation
  },
  data() {
    return {
      user: { username: '' },
      activeTab: 'activity',
      notice: '基础组件运维管理平台上线,欢迎大家试用!有问题请联系@苗永宾!',
      weatherMsg: ''
    }
  },
  computed: {
    ...mapGetters(['username', 'mail', 'nickname', 'avatar'])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        username: this.username,
        mail: this.mail,
        nickname: this.nickname,
        avatar: this.avatar
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.layout-notice {
  margin: 5px 0 -6px;
}
.layout-content {
  margin: 5px 0;
  box-sizing: border-box;
}
.page-header {
  border: 1px solid rgb(232 234 236);
  border-left: none;
  border-right: none;
  min-height: 120px;
  background: white;
}
.page-tabs {
  margin: 0px 0 10px 10px;
}
.layout-notice .notice {
  display: inline-block;
  width: 98%;
}
.page-card {
  margin: 8px 8px 8px 0px;

  &__title {
    &__tip {
      font-size: 10px;
      font-weight: 330;
    }
  }
}
.page-card-content {
  max-height: 600px;
  overflow: auto;
}
.page-card .operate Button {
  margin-right: 10px;
  margin-bottom: 5px;
}
</style>
